// import React from 'react';
import React from 'react'
// import { createStore } from 'redux'
import { createStore } from './redux/my-redux'
// import { connect, Provider } from 'react-redux'
/*
  为什么这个包必须要引入
    因为编译后的代码是这样的 React.createElement({  })
    没有 React 变量, 代码就直接异常了
*/
import ReactDOM from 'react-dom';

let reducer = function(state = {num: 0}, action) {
  switch(action.type) {
    case 'add':
      return {
        ...state,
        num: state.num + 1
      }
    case 'reduce':
      return {
        ...state,
        num: state.num - 1
      }
    default:
      return {num: 0}
  }
}

let store = createStore(reducer)

store.subscribe(function() {
  console.log(store.getState());
})
store.dispatch({ type: 'add' })
store.dispatch({ type: 'add' })
store.dispatch({ type: 'add' })





const Comp = ({ name }) => (
  <h2>my-react: {name}</h2>
)

class Comp2 extends React.Component{

  add = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'add'
    })
  }

  render() {
    const { num } = this.props
    return (
      <h1>React Class 组件: <button style={{ fontSize: 30 }} onClick={this.add} >{num}</button></h1>
    )
  }
}

// Comp2 = connect(state => state)(Comp2)

const jsx = (
  <div id="demo" >
    {/* <Provider store={store}> */}
      <span>hello - span</span>
      <Comp name='i`m react --- ~~' />
      <Comp2 />
    {/* </Provider> */}
  </div>
)

ReactDOM.render(
  jsx,
  document.getElementById('root')
);
